<template>
    <el-row :gutter="0">
        <el-col :span="8">
            <div class="left text-center">
                <div>
                    <el-image style="width: 60%" src="https://huajing-1344106420.cos.ap-shanghai.myqcloud.com/index-logo.png" fit="contain" />
                    <div class="tit">目录/CONTENTS</div>
                </div>
            </div>
        </el-col>
        <el-col :span="1">
            <div class="center text-center"></div>
        </el-col>
        <el-col :span="15" style="background-color: #FFFFFF;">
            <el-header class="header">
                <el-row :gutter="20">
                    <el-col :span="24" class="text-right">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <el-avatar style="margin-top: 8px;cursor: pointer;" :src="user.avatar" />
                                <el-text style="padding:0px 16px 0px 8px;position: relative;top: -14px;">{{ user.name }}</el-text>
                                <el-badge :show-zero="false" :value="waitTotal" class="item" :offset="[-10, -20]"><el-icon @click="router.push({ name: 'approve'})" style="padding:0px 16px 0px 8px;position: relative;top: -14px;" size="20"><el-icon><More /></el-icon></el-icon></el-badge>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="onLogout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <div class="text-right">
                <el-row style="margin-top: 120px;">
                    <el-col v-for="(item,index) in routerList" :key="index" :span="11" :offset="1">
                        <el-container style="margin-top: 80px;cursor: pointer;" @click="onLink(item)">
                            <el-aside width="80px"><div class="index">0{{index+1}}</div></el-aside>
                            <el-main style="padding: 0px 15px;"><div class="side-name">　{{item.meta.side_name}}</div></el-main>
                        </el-container>
                    </el-col>
                    <el-col :span="11" :offset="1">
                        <el-container style="margin-top: 80px;cursor: pointer;">
                            <el-aside width="80px"><div class="index">08</div></el-aside>
                            <el-main style="padding: 0px 15px;"><div class="side-name">　子分公司</div></el-main>
                        </el-container>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { More } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import router from '../../router';
import http from '../../util/request';
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)
let routerList:any = router.options.routes[0].children
let waitTotal = ref(0)
const onLink = (data:any) => {
    router.push({ name: data.name})
}

const onWait = () => {
    http.post('/approve/wait',{}).then((response:any)=>{
        waitTotal.value = response.data.total
    })
}

const onLogout = () => {
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('project')
    router.push({ name: 'index'})
}

onMounted(()=>{
    onWait()
})
</script>
<style scoped>
.left{background-color: #3d6abf;height: 100vh;position: relative;width: 100%; display: table-cell; vertical-align: middle;}
.left .tit{border: 3px solid #FFF;color: #FFF;width: 55%;margin: auto;padding: 12px 0px;font-weight: 800;font-size: 1.4rem;margin-top: 20px;}
.index{background-color: #3d6abf;color: #FFF;text-align: center;line-height: 80px;font-size: 1.6rem;}
.side-name{background-color: #3d6abf;color: #FFF;text-align: left;line-height: 80px;font-size: 1.6rem;}
.center{background-color: #5ca6eb;height: 100vh;position: relative;width: 8px}
</style>
  